<template>
    <div class="homepage_container">
        <!--走马灯 -->
        <div class="first" style="width: 1100px">
            <el-carousel height="400px" style="margin-top: -30px; text-align: center; margin-left: -350px; ">
                <el-carousel-item v-for="item in realdata" :key="item.index" style="text-align: center; line-height: 120px">
                    <div class="pic_item">
                        <img :src="item.imgsrc" width="100%">
                        <!-- <span>{{item.title}}</span> -->
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>

        <!-- 弹窗 -->
        <el-dialog v-model="dataSon" :title=dataSon.title :visible.sync="dialogFormVisible" style="text-align: center">
            <div style="text-align: left">
                <span>{{ dataSon.content }}</span>
            </div>
            <div style="text-align: left; margin-top: 20px;">
                <p>著作人：{{ dataSon.updatePerson }}</p>
                <p>发布时间：{{ dataSon.uploadTime }}</p>
                <p>修改时间：{{ dataSon.updateTime }}</p>
            </div>
            <div slot="footer" class="dialog-footer" style="text-align: left">
                <div style="text-align: right;">
                    <el-button @click="dialogFormVisible = false">关闭</el-button>
                    <el-button type="primary" @click="favorite">收藏</el-button>
                </div>
            </div>
        </el-dialog>

        <!-- 网页正文信息 -->
        <div class="major" style="margin-bottom: 10px; height: 1000px;  width: 1100px;">
            <div class="no1" v-for="item in realdata" style="margin-bottom: 20px;width: 1000px; margin-left: -350px;">
                <!-- 资讯图片 -->
                <div>
                    <img :src="item.imgsrc" style="height: 260px; width: 500px">
                </div>
                <!-- 资讯内容 -->
                <div style="display: block; margin-left: 30px; width: 400px; height: 260px; word-wrap: break-word">
                    <!-- 标题 -->
                    <el-link :underline="false" style="width: 500px; font-size: large; margin-left: 230px;" type="primary"
                        @click="getKnowledge(item)">{{ item.title }}</el-link>
                    <!-- 内容 -->
                    <div style="width: 900px; text-align: left;">
                        <span style="font-size: large;">{{ item.content | ellipsis }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { GetKnowledgeInfoListAPI } from '@/components/utils/api/knowledge_api.js'
import { GetBinDingAPI } from '@/components/utils/api/sysfile_api.js'
import { PostReadAPI, GetReadAPI } from '@/components/utils/api/read_api.js'
export default {
    data() {
        return {
            testdata: [],
            realdata: [],
            data: [],
            data1: [],
            data2: [],
            dataSon: [],
            title: '',
            dialogFormVisible: false,
            annexId: " ",
            content: " ",
            id: "  ",
            title: "  ",
            updatePerson: "  ",
            updatePersonId: "  ",
            updateTimes: '',
            uploadPerson: "  ",
            uploadPersonId: "  ",
            uploadTime: '',
            activeIndex: ''
        }
    },
    created() {
        this.getKnowledgeInfoList()
    },
    methods: {
        //收藏
        favorite() {
            var params = {
                refId: this.dataSon.id,
                operation: 2,
                refType: "knowledge",
                status: 0,
                isCancel: 0
            }
            PostReadAPI(params).then(res => {
                console.log("file: EpidemicKnowledge.vue:95  res", res)
                if (res.data.code == 500) {
                    this.$message.error(res.data.message);
                }
                else if (res.data.code == 200) {
                    this.$message.success("收藏成功");
                }
                else if (res.data.code == 401) {
                    this.$message.error("请先登录再进行收藏");
                }
            })
        },

        //初始化
        async getKnowledgeInfoList() {
            await GetKnowledgeInfoListAPI({}).then(res => {
                this.data = res.data.data
                this.data.forEach((element, index) => {
                    if (element.annex.length == 0) {
                        this.data1[index] = (null)
                    }
                    else {
                        element.annex.forEach(item => {
                            this.data1[index] = (element.annex)
                        });
                    }
                });

            })

            this.data1.forEach((item, index) => {
                for (let i = 0; i < item.length; i++) {
                    this.data2[index] = item[i].id
                }
            })

            for (let i = 0; i < this.data2.length; i++) {
                await GetBinDingAPI(this.data2[i]).then(res => {
                    this.testdata.push(res.data.data)
                })
            }

            this.data.forEach((element, i) => {
                this.realdata.push({
                    imgsrc: this.testdata[i],
                    content: element.content,
                    id: element.id,
                    title: element.title,
                    updatePerson: element.updatePerson,
                    updatePersonId: element.updatePersonId,
                    updateTime: element.updateTime,
                    uploadPerson: element.uploadPerson,
                    uploadPersonId: element.uploadPersonId,
                    uploadTime: element.uploadTime
                })
            });
        },

        // 获取当行知识信息
        getKnowledge(information) {
            this.dialogFormVisible = true
            this.dataSon = information
        },

    },
    filters: {
        ellipsis(value) {
            if (!value) return ''
            if (value.length > 100) {
                return value.slice(0, 480) + '...'
            }
            return value
        }
    }
}
</script>
<style>
.homepage_container {
    display: block;
    width: 100%;
    height: 100%;
}

.first {
    margin-top: 50px;
    text-align: center;
    padding-left: 25%;
}

.major {
    height: 300px;
    width: 400px;
    margin-top: 50px;
    text-align: center;
    padding-left: 25%;
}

.no1 {
    display: flex;
}

.no2 {
    display: flex;
    margin-top: 30px;
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}
</style>